<template>
  <view class="menu-item" :class="{'logout-item': isLogout}" @tap="handleClick">
    <!-- 图标区域 -->
    <view class="menu-icon" v-if="showIcon">
      <slot name="icon">
        <uni-icons :type="icon" :size="iconSize" :color="iconColor"></uni-icons>
      </slot>
    </view>
    
    <!-- 标题区域 -->
    <view class="menu-title">
      <slot name="title">
        <text :style="{color: titleColor, fontSize: titleSize}">{{ title }}</text>
      </slot>
    </view>
    
    <!-- 箭头区域 -->
    <view class="menu-arrow" v-if="showArrow">
      <slot name="arrow">
        <uni-icons type="right" :size="arrowSize" :color="arrowColor"></uni-icons>
      </slot>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  // 显示控制
  showIcon: {
    type: Boolean,
    default: true
  },
  showArrow: {
    type: Boolean,
    default: true
  },
  
  // 图标相关
  icon: {
    type: String,
    default: 'calendar'
  },
  iconSize: {
    type: [String, Number],
    default: 20
  },
  iconColor: {
    type: String,
    default: '#007AFF'
  },
  
  // 标题相关
  title: {
    type: String,
    default: '菜单项'
  },
  titleColor: {
    type: String,
    default: '#333'
  },
  titleSize: {
    type: String,
    default: '30rpx'
  },
  
  // 箭头相关
  arrowSize: {
    type: [String, Number],
    default: 16
  },
  arrowColor: {
    type: String,
    default: '#ccc'
  },
  
  // 样式相关
  isLogout: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['click'])

const handleClick = () => {
  emit('click')
}
</script>

<style lang="scss" scoped>
.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx 40rpx;
  border-bottom: 1rpx solid #f5f5f5;
  
  &:last-child {
    border-bottom: none;
  }
  
  &:active {
    background-color: #f8f8f8;
  }

  >.menu-icon {
    margin-right: 20rpx;
    width: 40rpx;
    height: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  >.menu-title {
    flex: 1;
    font-size: 30rpx;
    color: #333;
  }

  >.menu-arrow {
    color: #ccc;
  }

  &.logout-item {
    >.menu-title {
      color: #ff3b30;
    }
  }
}
</style>